<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <!-- <el-button type="primary" icon="el-icon-plus" @click="add"></el-button> -->
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input
            v-model="search.name"
            placeholder="企业名称"
            clearable
            @clear="getData()"
          >
          </el-input>
          <el-button type="primary" icon="el-icon-search" @click="getData()">
          </el-button>
          <el-button
            type="success"
            @click="getFilter()"
            style="margin-left: 10px"
          >
            高级查询
          </el-button>
        </div>
      </div>
    </el-header>
    <div class="filterParams">
      <el-tag
        v-for="(val, key, i) in filterParams"
        :key="key"
        closable
        type="warning"
        v-show="val"
        @close="closeTag(key)"
      >
        {{ key }}：{{ val }}
      </el-tag>
    </div>
    <el-main class="nopadding">
      <div class="nopaddingTable">
        <!-- ###去掉多余样式（宽度和下边距），增加表格高度100%样式，保证表格填满区域，同时也会影响到无数据提示的位置 -->
        <el-table
          :data="tableData"
          height="100%"
          row-key="id"
          stripe
          @sort-change="sortChange"
          element-loading-text="正在努力加载中..."
          v-loading="loading"
        >
          <el-table-column
            label="企业名称"
            prop="enterprise.name"
            width="auto"
            show-overflow-tooltip
            sortable="custom"
          ></el-table-column>

          <el-table-column
            label="企业属地"
            prop="enterprise.block"
            sortable="custom"
            width="100"
          >
          </el-table-column>
          <el-table-column
            label="统一社会信用代码"
            prop="enterprise.unifiedCode"
            width="200"
            sortable="custom"
          ></el-table-column>

          <el-table-column
            label="联系电话"
            prop="enterprise.contactNumber"
            width="auto"
            sortable="custom"
          ></el-table-column>

          <el-table-column
            label="填写时间"
            prop="fillingTime"
            width="auto"
            sortable="custom"
          ></el-table-column>

          <el-table-column
            label="跟进组"
            prop="followGroup"
            sortable="custom"
            width="auto"
          >
          </el-table-column>

          <el-table-column
            label="记录信息"
            prop="recordInformation"
            sortable="custom"
            width="auto"
            show-overflow-tooltip
          ></el-table-column>

          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="220"
          >
            <template #default="scope">
              <el-button
                type="text"
                size="small"
                @click="details(scope.row, scope.$index)"
                >查看</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="edit(scope.row, scope.$index)"
                >编辑</el-button
              >
              <el-popconfirm title="确定删除吗？" @confirm="del(scope.row)">
                <template #reference>
                  <el-button type="text" size="small" style="color: #f56c6c"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="暂无跟进信息" :image-size="100"></el-empty>
          </template>
        </el-table>
      </div>
      <el-footer>
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          background
          layout="total,prev, pager, next, sizes"
          :total="pagination.total"
          v-model:currentPage="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[5, 10, 20]"
        >
        </el-pagination>
      </el-footer>
    </el-main>
  </el-container>

  <save-drawer
    ref="saveDrawer"
    v-if="drawer.save"
    @onRefresh="onRefresh"
    @closed="drawer.save = false"
  ></save-drawer>

  <details-drawer
    ref="detailsDrawer"
    v-if="drawer.details"
    @onRefresh="onRefresh"
    @closed="drawer.details = false"
  ></details-drawer>

  <filter-drawer
    ref="filterDrawer"
    v-if="drawer.filter"
    @onRefresh="onRefresh"
    @closed="drawer.filter = false"
  ></filter-drawer>
</template>

<script>
import saveDrawer from "./save";
import detailsDrawer from "./details";
import filterDrawer from "./filter";

export default {
  name: "infoFollow-index",
  components: {
    saveDrawer,
    detailsDrawer,
    filterDrawer,
  },
  emits: ["success", "closed"],
  data() {
    return {
      drawerVisible: false,
      tableData: [],
      loading: false,
      drawer: {
        save: false,
        details: false,
      },
      search: {
        page: 1,
        pageSize: 10,
        enterpriseId: "",
        followGroup: "",
        recordInformation: "",
        minFillingTime: "",
        maxFillingTime: "",
        orderData: "",
        sort: "",

        name: "",
        enterpriseType: "",
        block: "",
        legalPerson: "",
        unifiedCode: "",
        regCapital: "",
        address: "",
        contactNumber: "",
        industry: "",
        minRegDate: "",
        maxRegDate: "",
      },
      filterParams: {
        跟进调查组: "",
        记录信息: "",

        企业名称: "",
        企业类型: "",
        企业属地: "",
        法定代表人: "",
        统一社会信用代码: "",
        注册资本: "",
        注册地址: "",
        联系电话: "",
        所属行业: "",

        填写时间范围: "",
        注册日期范围: "",
      },
      filterArrayEN: [
        "followGroup",
        "recordInformation",

        "name",
        "enterpriseType",
        "block",
        "legalPerson",
        "unifiedCode",
        "regCapital",
        "address",
        "contactNumber",
        "industry",

        "minFillingTime",
        "maxFillingTime",
        "minRegDate",
        "maxRegDate",
      ],
      filterArrayCN: [
        "跟进调查组",
        "记录信息",
        "企业名称",
        "企业类型",
        "企业属地",
        "法定代表人",
        "统一社会信用代码",
        "注册资本",
        "注册地址",
        "联系电话",
        "所属行业",

        "填写时间范围",
        "注册日期范围",
      ],
      pagination: {
        total: "",
        pageNum: "",
        pageSize: "",
      },
    };
  },
  watch: {
    $route(to, from) {
      if(to.fullPath != "/login"){
        this.getData();
      }
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    //打开时
    open(id) {
      this.search.enterpriseId = id;
      this.search.orderData = "";
      this.search.sort = "";
      this.getData();
    },
    // 刷新
    onRefresh(form) {
      if (form) {
        Object.assign(this.search, form);
      }
      this.getData();
    },
    //修改
    async getData() {
      this.drawerVisible = true;
      this.loading = true;
      let res = await this.$API.sysFollowUp.pageList.get(this.search);
      if (res.code == 0) {
        this.getFilterParams();
        if (res.data) {
          if (res.data.list) {
            this.tableData = res.data.list;
            this.pagination = {
              total: res.data.total,
              pageNum: res.data.pageNum,
              pageSize: res.data.pageSize,
            };
          } else {
            this.$alert("返回数据格式错误，请尝试刷新", "数据错误", {
              type: "error",
              confirmButtonText: "确定",
              dangerouslyUseHTMLString: true,
              showCancelButton: false,
            });
          }
        } else {
          this.$alert("返回数据格式错误，请尝试刷新", "数据错误", {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          });
        }
        this.loading = false;
      } else {
        this.loading = false;
        let errdata = this.$TOOL.response(res);
        this.$alert(
          this.$TOOL.json.get("", errdata, "message"),
          this.$TOOL.json.get("", errdata, "title"),
          {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          }
        )
          .then(() => {
            this.drawerVisible = false;
          })
          .catch(() => {});
      }
    },
    //编辑
    edit(data) {
      this.drawer.save = true;
      this.$nextTick(() => {
        this.$refs.saveDrawer.open("edit").edit(data.id);
      });
    },
    //查看
    details(data) {
      this.drawer.details = true;
      this.$nextTick(() => {
        this.$refs.detailsDrawer.open(data.id);
      });
    },
    //删除
    async del(row) {
      let reqData = { id: row.id };
      let res = await this.$API.sysFollowUp.delete.get(reqData);
      if (res.code == 0) {
        this.onRefresh();
        this.$message.success("删除成功");
      } else {
        let errdata = this.$TOOL.response(res);
        this.$alert(
          this.$TOOL.json.get("", errdata, "message"),
          this.$TOOL.json.get("", errdata, "title"),
          {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          }
        );
      }
    },
    //高级查询
    getFilter() {
      this.drawer.filter = true;
      this.$nextTick(() => {
        this.$refs.filterDrawer.open(this.search);
      });
    },
    // 关闭页面
    close() {
      this.$emit("closed");
    },
    //分页
    sizeChange(val) {
      this.search.pageSize = val;
      this.getData();
    },
    currentChange(val) {
      this.search.page = val;
      this.getData();
    },
    //查询标签
    getFilterParams() {
      for (let i = 0; i < this.filterArrayCN.length; i++) {
        this.filterParams[this.filterArrayCN[i]] =
          this.search[this.filterArrayEN[i]];
      }
      if (this.search.minFillingTime && this.search.maxFillingTime) {
        this.filterParams.填写时间范围 =
          this.search.minFillingTime + " 至 " + this.search.maxFillingTime;
        this.filterParams.注册日期范围 = "";
      }

      if (this.search.minRegDate && this.search.maxRegDate) {
        this.filterParams.注册日期范围 =
          this.search.minRegDate + " 至 " + this.search.maxRegDate;
      }
    },
    closeTag(key) {
      this.filterParams[key] = "";
      for (let i = 0; i < this.filterArrayCN.length; i++) {
        if (this.filterArrayCN[i] == key) {
          if (key == "注册日期范围") {
            this.search.maxRegDate = "";
            this.search.minRegDate = "";
          } else if (key == "填写时间范围") {
            this.search.maxFillingTime = "";
            this.search.minFillingTime = "";
          } else {
            this.search[this.filterArrayEN[i]] = "";
          }
        }
      }
      this.getData();
    },
    //排序
    sortChange(value) {
      if (value.prop) {
        if (value.prop.indexOf("enterprise.") == -1) {
          this.search.orderData = value.prop;
        } else {
          this.search.orderData = value.prop.slice(11);
        }
      }
      if (value.order == "ascending") {
        this.search.sort = "asc";
      } else if (value.order == "descending") {
        this.search.sort = "desc";
      } else {
        this.search.sort = "";
        this.search.orderData = "";
      }
      this.getData();
    },
  },
};
</script>

<style scoped>
.elCard:deep(.el-card__body) {
  padding-top: 15px;
  padding-bottom: 0px;
}
</style>
